<template>
  <div class="icons" v-if="homeiconsData && homeiconsData.length">
    <swiper ref="mySwiper">
      <swiper-slide v-for="(page, index) of homeiconsData" :key="index">
        <div class="icon" v-for="item of page" :key="item.id">
          <div class="icon-img">
            <img class="icon-img-content" :src="item.imgurl" />
          </div>

          <p class="icon-desc">{{ item.desc }}</p>
        </div>
      </swiper-slide>
    </swiper>
    <!-- <div class="icon" v-for="item of iconList" :key="item.id">
      <div class="icon-img">
        <img class="icon-img-content" :src="item.imgurl" alt="" />
      </div>

      <p class="icon-desc">{{ item.desc }}</p>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "HomeIcons",
  props:['homeicons'],
  data() {
    return {
      homeiconsData: []
    };
  },
  // watch: {
  //   homeicons(val) {
  //     if(!val) return
  //     const homeicons = [];
  //     val.forEach((item, index) => {
  //       const page = Math.floor(index / 10);
  //       if (!homeicons[page]) {
  //         homeicons[page] = [];
  //       }
  //       homeicons[page].push(item);
  //     });
  //     this.homeiconsData = homeicons
      
  //   },
  // },
  watch: {
    homeicons(val,oldval){
      // console.log(val,oldval,'qqqqq')
      if(val && val.length){
        // console.log(val,'val')
        const pages = [];
        // console.log(this,'lllllllllll')
        val.forEach((item, index) => {
          const page = Math.floor(index / 10);
          if (!pages[page]) {
            pages[page] = [];
          }
          pages[page].push(item);
        });
        console.log(pages,'valaaaaaaa')
        this.homeiconsData=pages
      }
    },

    // pages() {
    //   const pages = [];
    //   this.pages.forEach((item, index) => {
    //     const page = Math.floor(index / 10);
    //     if (!pages[page]) {
    //       pages[page] = [];
    //     }
    //     pages[page].push(item);
    //   });
    //   return pages;
    // },
  },
};
</script>

<style lang="scss" scoped>
.icons {
  overflow: hidden;
  height: 0;
  padding-bottom: 50%;
  margin-top: 5px;
  .icon {
    float: left;
    width: 20%;
    height: 0;
    padding-bottom: 25%;
    position: relative;
    .icon-img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 22px;
      box-sizing: border-box;
      padding: 5px;
      .icon-img-content {
        display: block;
        margin: 0 auto;
        height: 100%;
      }
    }
    .icon-desc {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 22px;
      line-height: 22px;
      text-align: center;
      color: #333;
      margin: 0;
      font-size: 14px;
    }
  }
}
</style>